<template>
  <section class="about-section">
    <div class="container">
      <h2 class="section-title">关于我们</h2>
      
      <div class="about-content">
        <div class="about-text">
          <p>代码小英雄品牌隶属于深圳市编界教育科技有限公司，国家高新技术企业，致力于推动国内少儿编程教育发展，培养未来设计师。代码小英雄历时两年自主研发了包括Scratch图形化编程、C++竞赛算法等课程体系，课程衔接合理完善，融合了多门学科（语文、英语、科普类等），真正让我们的用户在快乐中潜移默化学到更多知识。</p>
          <p>通过学习代码小英雄课程，可以让青少年用户轻松创作出一些充满奇思妙想的游戏、软件、动画、互动故事等作品，全方位锻炼问题解决能力、逻辑思维能力、跨学科结合能力、审美能力和团队协作能力等综合素养，建立起坚实的STEAM学科基础。</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AboutSection'
}
</script>

<style scoped>
.about-section {
  padding: 60px 20px;
  background-color: #ffffff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  color: #333;
  margin-bottom: 40px;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 4px;
  background-color: #3e8ef7;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.about-content {
  max-width: 1000px;
  margin: 0 auto;
}

.about-text p {
  line-height: 2;
  color: #555;
  margin-bottom: 25px;
  text-align: justify;
  text-indent: 2em;
  font-size: 16px;
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.75rem;
  }
}
</style> 